<template>
  <page-header-wrapper>
    <a-card size="small" title="常用功能">
      <a-button slot="extra" type="primary" @click="handleSetting()">设置</a-button>
      <a-row>
        <a-col 
          :xs="6" 
          :sm="4" 
          :md="2" 
          class="flex" 
          v-for="item in list" 
          :key="item.id">
          <div @click="onJump(item)" style="cursor: pointer; text-align: center; width: 100%; margin-bottom: 24px">
            <div
              style="height: 40px; width: 40px; margin: 0 auto; border-radius: 10px"
              :style="{ background: item.color }"
            >
              <a-icon :type="item.iconType" style="font-size: 24px; line-height: 40px; color: #fff" />
            </div>
            <div style="line-height: 30px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden">
              {{ item.functionName }}
            </div>
          </div>
        </a-col>
      </a-row>
    </a-card>
    <a-card size="small" title="公告" style="margin-top: 12px">
      <a-alert type="error">
        <template slot="message">
          <p style="white-space: pre-wrap">
            {{ noticeDetail.noticeContent }}
          </p>
          <!-- <div style="line-height: 40px;">欢迎使用小算盘，感谢您对我们工作的理解与支持，谢谢！</div>
          <div style="line-height: 40px;">请您使用IE9及IE9以上版本浏览器或其他非IE浏览器，低版本IE浏览器部分功能无法正常使用！</div>
          <div style="line-height: 40px;">系统使用过程中，有任何问题请在小算盘沟通群中咨询客服人员，提问时请先修改您的群昵称，描述问题请尽量带截图或者视频，这样方便客服快速准确的判断问题，节省您的时间。</div>
          <div style="line-height: 40px;">客服工作时间为：早9点至晚8点，超过此时间范围时，请联系我司当地业务人员解决。</div>
          <div style="line-height: 40px;">服务投诉电话：梁先生15332258855，陈先生15591357888</div> -->
        </template>
      </a-alert>
    </a-card>
    <a-card size="small" title="更新日志" style="margin-top: 12px">
      <a-button slot="extra" type="primary" @click="handleLogs()">查看全部</a-button>
      <div class="timeline-wrapper">
        <div class="timeline" v-for="item in logs" :key="item.id">
          <div class="timeline-left">
            {{ item.createTime }}
          </div>
          <div class="timeline-right">
            {{ item.updateContent }}
          </div>
          <div class="timeline-dot"></div>
        </div>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
import { getFunctionListUsingPOST1, getSysUpdateLogListUsingPOST } from '@/api/api/shouye.ts'
import { getNoticeUsingGET } from '@/api/api/xitongguanli.ts'

export default {
  name: 'HomeIndex',
  components: {
    PageHeaderWrapper,
  },
  data() {
    return {
      queryParam: {
        pageNo: 1,
        pageSize: 10,
      },
      noticeDetail: {},
      loadData: [],
      list: [],
      logs: [],
    }
  },
  computed: {},
  created() {
    getSysUpdateLogListUsingPOST(this.queryParam)
      .then((res) => {
        this.logs = res.data.list
      })
      .catch((error) => {
        this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
      })

    getNoticeUsingGET(this.queryParam)
      .then((res) => {
        // this.logs = res.data.list
        this.noticeDetail = res.data
      })
      .catch((error) => {
        this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
      })
  },
  mounted() {
    getFunctionListUsingPOST1()
      .then((res) => {
        this.list = res?.data?.list.filter((item) => item.isShow == '1')
      })
      .catch((error) => {
        this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误2')
      })
  },
  methods: {
    handleSetting() {
      this.$router.push({ path: `/home/setting` })
    },
    handleLogs() {
      this.$router.push({ path: `/home/alllogs` })
    },
    onJump(item) {
      window.location.href = item.link
    },
  },
}
</script>

<style lang="less" scoped>
@import './index.less';
.flex {
  display: flex;
  justify-content: center;
}
.timeline-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 15px 5px 0 160px;
  .timeline {
    position: relative;
    width: 100%;
    &::before {
      content: '';
      position: absolute;
      left: val(--left);
      width: 1px;
      top: 20px;
      bottom: 0;
      background-image: linear-gradient(to bottom, rgba(144, 156, 173, 0.6) 60%, rgba(255, 255, 255, 0) 0%);
      background-position: left;
      background-size: 1px 5px;
      background-repeat: repeat-y;
    }
    .timeline-left {
      display: block;
      width: calc(var(--left) - 7px);
      position: absolute;
      margin-left: -140px;
      // width: 100px;
      text-align: right;
      color: #8492a5;
    }
    .timeline-right {
      position: relative;
      margin: -3px 0 10px 20px;
    }
    .timeline-dot {
      left: var(--left);
      width: 7px;
      height: 7px;
      position: absolute;
      border-radius: 50%;
      box-shadow: 0 0 0 1px #d8d8d8;
      background: white;
      text-align: center;
      top: 10px;
      line-height: 40px;
      margin-left: -3.5px;
    }
  }
}
</style>
